<template>
  <div class="data-permission-view">
    <el-form inline size="small">
      <el-form-item>
        <el-input v-model="queryParams.name" placeholder="请输入数据权限名称" />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.code"
          placeholder="请输入数据权限标识符"
        />
      </el-form-item>
      <!--      <el-form-item>-->
      <!--        <dictionary-select-->
      <!--          v-model="queryParams.businessName"-->
      <!--          parent-dictionary-value="dataPermissionBusinessName"-->
      <!--          placeholder="请选择数据字段"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item>
        <unit-select
          v-model="queryParams.unitId"
          :permission="listPermission"
          placeholder="请选择组织单位"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="small" @click="getInfo()">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="reset" icon="RefreshRight">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="flex mb-4">
      <PermissionGuard :permission="addPermission">
        <el-button
          type="primary"
          icon="Plus"
          size="small"
          @click="addDataPermissionDialog.show()"
        >
          新增
        </el-button>
      </PermissionGuard>
      <PermissionGuard :permission="deletePermission">
        <el-button
          type="danger"
          icon="Delete"
          size="small"
          :disabled="haveDeleteData"
          @click="
            handleClickDeleteButton(
              selectData,
              deleteDataPermission,
              getInfo,
              '数据权限',
              'name',
              'id',
            )
          "
        >
          删除
        </el-button>
      </PermissionGuard>
    </div>
    <Table :data="tableData" @selection-change="handleSelectionChange">
      <TableColumn :min-width="getColumnWidth(tableData, 'id', 50)" prop="id" />
      <TableColumn
        label="名称"
        prop="name"
        :min-width="getColumnWidth(tableData, 'name', 80)"
      />
      <TableColumn
        label="数据字段"
        prop="businessName"
        :min-width="
          businessNameDictionaryInfo.getColumnDictionaryWidth(
            tableData,
            'businessName',
            100,
          )
        "
      >
        <template #default="{ row }">
          <div>
            {{
              businessNameDictionaryInfo.getDictionaryNameByValue(
                row.businessName,
              )
            }}
          </div>
        </template>
      </TableColumn>
      <TableColumn
        label="标识符"
        prop="code"
        :min-width="getColumnWidth(tableData, 'code', 80)"
      />
      <TableColumn
        label="排序"
        prop="sort"
        :min-width="getColumnWidth(tableData, 'sort', 80)"
      />
      <TableColumn
        label="终端类型"
        :min-width="
          powerTypeDictionaryInfo.getColumnDictionaryWidth(
            tableData,
            'type',
            100,
          )
        "
      >
        <template #default="{ row }">
          <div>
            {{ powerTypeDictionaryInfo.getDictionaryNameByValue(row.type) }}
          </div>
        </template>
      </TableColumn>
      <TableColumn
        label="所属单位"
        prop="unitName"
        :min-width="getColumnWidth(tableData, 'unitName', 100)"
      />
      <TableColumn label="操作" :width="180">
        <template #default="{ row }">
          <PermissionGuard :permission="addPermission" :unit-id="row.unitId">
            <el-button
              type="primary"
              size="small"
              @click="addDataPermissionDialog.show(row)"
            >
              编辑
            </el-button>
          </PermissionGuard>
          <PermissionGuard :permission="deletePermission" :unit-id="row.unitId">
            <el-button
              type="danger"
              size="small"
              @click="
                handleClickDeleteButton(row, deleteDataPermission, getInfo)
              "
            >
              删除
            </el-button>
          </PermissionGuard>
        </template>
      </TableColumn>
    </Table>
    <Pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @size-change="getInfo"
      @current-change="getInfo"
    />
    <AddDataPermissionDialog ref="addDataPermissionDialog" @update="getInfo" />
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table/Table.vue'
import TableColumn from '@/components/table/TableColumn.vue'
import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
import {
  disablePermissionButton,
  getColumnWidth,
  handleClickDeleteButton,
} from '@/plugins/util'
import { useGetDictionaryInfo } from '@/hooks/useGetDictionaryInfo'
import Pagination, { PageType } from '@/components/Pagination.vue'
import { PageParam } from '@/type'
import {
  deleteDataPermission,
  getDataPermissionList,
} from '@/api/sys/dataPermission'
import UnitSelect from '@/components/unit/UnitSelect.vue'
import AddDataPermissionDialog from '@/views/sys/dataPermission/AddDataPermissionDialog.vue'
import PermissionGuard from '@/components/dataPermission/PermissionGuard.vue'

const listPermission = 'dataPermission:list'
const addPermission = 'dataPermission:add'
const deletePermission = 'dataPermission:del'

const powerTypeDictionaryInfo = useGetDictionaryInfo('powerType')
const businessNameDictionaryInfo = useGetDictionaryInfo(
  'dataPermissionBusinessName',
)
const addDataPermissionDialog = useTemplateRef<
  InstanceType<typeof AddDataPermissionDialog>
>('addDataPermissionDialog')

const tableData = ref([])
const selectData = ref([])

const haveDeleteData = computed(() => {
  return disablePermissionButton(selectData.value, deletePermission)
})

const queryParams = reactive({
  name: undefined,
  code: undefined,
  type: '2',
  unitId: undefined,
  businessName: undefined,
})

const page = reactive<PageType>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})

function handleSelectionChange(val: any[]) {
  selectData.value = val
}

async function reset() {
  Object.assign(queryParams, {
    name: undefined,
    code: undefined,
    type: '2',
    unitId: undefined,
    businessName: undefined,
  })

  await getInfo()
}

async function getInfo() {
  const postData: PageParam<typeof queryParams> = {
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    sort: [],
    query: queryParams,
  }

  const { data } = await getDataPermissionList(postData)
  if (data.status === 200) {
    page.currentPage = data.data.currentPage
    page.pageSize = data.data.pageSize
    page.total = data.data.totalCount
    tableData.value = data.data.data
  }
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss"></style>
